<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="theme" content="Chirpy v2.5.1">
		<meta name="generator" content="Jekyll v3.9.0" />
		<meta property="og:title" content="Markdown文本和排版" />
		<meta name="author" content="jianxiaochong" />
		<meta property="og:locale" content="en_US" />
		<meta name="description" content="这个Jekyll模板完全兼容Markdown语法。现在，让我们看看文本和排版。"
		/>
		<meta property="og:description" content="这个Jekyll模板完全兼容Markdown语法。现在，让我们看看文本和排版。"
		/>
		<link rel="canonical" href="https://jianxiaochong.github.io/posts/text-and-typography/"
		/>
		<meta property="og:url" content="https://jianxiaochong.github.io/posts/text-and-typography/"
		/>
		<meta property="og:site_name" content="jianxiaochong" />
		<meta property="og:image" content="https://jianxiaochong.github.io/assets/img/sample/devices-mockup.png"
		/>
		<meta property="og:type" content="article" />
		<meta property="article:published_time" content="2020-08-08T11:33:00+08:00"
		/>
		<meta name="twitter:card" content="summary_large_image" />
		<meta property="twitter:image" content="https://jianxiaochong.github.io/assets/img/sample/devices-mockup.png"
		/>
		<meta property="twitter:title" content="Markdown文本和排版" />
		<meta name="twitter:site" content="@jianxiaochong" />
		<meta name="twitter:creator" content="@jianxiaochong" />
		<meta name="google-site-verification" content="google_meta_tag_verification"
		/>
		<script type="application/ld+json">
			{
				"description": "这个Jekyll模板完全兼容Markdown语法。现在，让我们看看文本和排版。",
				"@type": "BlogPosting",
				"headline": "Markdown文本和排版",
				"dateModified": "2020-08-08T11:33:00+08:00",
				"datePublished": "2020-08-08T11:33:00+08:00",
				"mainEntityOfPage": {
					"@type": "WebPage",
					"@id": "https://jianxiaochong.github.io/posts/text-and-typography/"
				},
				"author": {
					"@type": "Person",
					"name": "jianxiaochong"
				},
				"url": "https://jianxiaochong.github.io/posts/text-and-typography/",
				"image": "https://jianxiaochong.github.io/assets/img/sample/devices-mockup.png",
				"@context": "https://schema.org"
			}
		</script>
		<title>
			Markdown文本和排版 | jianxiaochong
		</title>
		<link rel="shortcut icon" href="/assets/img/favicons/favicon.ico" type="image/x-icon">
		<link rel="icon" href="/assets/img/favicons/favicon.ico" type="image/x-icon">
		<link rel="apple-touch-icon" href="/assets/img/favicons/apple-icon.png">
		<link rel="apple-touch-icon" href="/assets/img/favicons/apple-icon-precomposed.png">
		<link rel="apple-touch-icon" sizes="57x57" href="/assets/img/favicons/apple-icon-57x57.png">
		<link rel="apple-touch-icon" sizes="60x60" href="/assets/img/favicons/apple-icon-60x60.png">
		<link rel="apple-touch-icon" sizes="72x72" href="/assets/img/favicons/apple-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="76x76" href="/assets/img/favicons/apple-icon-76x76.png">
		<link rel="apple-touch-icon" sizes="114x114" href="/assets/img/favicons/apple-icon-114x114.png">
		<link rel="apple-touch-icon" sizes="120x120" href="/assets/img/favicons/apple-icon-120x120.png">
		<link rel="apple-touch-icon" sizes="144x144" href="/assets/img/favicons/apple-icon-144x144.png">
		<link rel="apple-touch-icon" sizes="152x152" href="/assets/img/favicons/apple-icon-152x152.png">
		<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-icon-180x180.png">
		<link rel="icon" type="image/png" sizes="192x192" href="/assets/img/favicons/android-icon-192x192.png">
		<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="96x96" href="/assets/img/favicons/favicon-96x96.png">
		<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png">
		<link rel="manifest" href="/assets/img/favicons/manifest.json">
		<meta name='msapplication-config' content='/assets/img/favicons/browserconfig.xml'>
		<meta name="msapplication-TileColor" content="#ffffff">
		<meta name="msapplication-TileImage" content="/assets/img/favicons/ms-icon-144x144.png">
		<meta name="theme-color" content="#ffffff">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
		<link rel="dns-prefetch" href="https://fonts.gstatic.com">
		<link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
		<link rel="dns-prefetch" href="https://www.google-analytics.com">
		<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
		<link rel="dns-prefetch" href="https://www.googletagmanager.com">
		<link rel="preconnect" href="cdn.jsdelivr.net">
		<link rel="dns-prefetch" href="cdn.jsdelivr.net">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
		integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css"
		integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous">
		<link rel="preload" as="style" href="/assets/css/post.css">
		<link rel="stylesheet" href="/assets/css/post.css">
		<link rel="preload" as="style" href="/assets/css/lib/bootstrap-toc.min.css">
		<link rel="stylesheet" href="/assets/css/lib/bootstrap-toc.min.css" />
		<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js">
		</script>
		<script async src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4/dist/js/bootstrap.min.js">
		</script>
		<script async src="/assets/js/post.min.js">
		</script>
		<script src="https://polyfill.io/v3/polyfill.min.js?features=es6">
		</script>
		<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
		</script>
		<script defer src="/app.js">
		</script>
		<body data-spy="scroll" data-target="#toc">
			<div id="sidebar" class="d-flex flex-column">
				<div id="nav-wrapper">
					<div id="profile-wrapper" class="d-flex flex-column">
						<div id="avatar" class="d-flex justify-content-center">
							<a href="/" alt="avatar">
								<img src="/assets/img/sample/avatar.jpg" alt="avatar" onerror="this.style.display='none'">
							</a>
						</div>
						<div class="profile-text mt-3">
							<div class="site-title">
								<a href="/">
									jianxiaochong
								</a>
							</div>
							<div class="site-subtitle font-italic">
								简小虫 丨个人博客
							</div>
						</div>
					</div>
					<ul class="nav flex-column">
						<li class="nav-item d-flex justify-content-center ">
							<a href="/" class="nav-link d-flex justify-content-center align-items-center w-100">
								<i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded">
								</i>
								<span>
									HOME
								</span>
							</a>
							<li class="nav-item d-flex justify-content-center ">
								<a href="/tabs/categories/" class="nav-link d-flex justify-content-center align-items-center w-100">
									<i class="fa-fw fas fa-stream ml-xl-3 mr-xl-3 unloaded">
									</i>
									<span>
										CATEGORIES
									</span>
								</a>
								<li class="nav-item d-flex justify-content-center ">
									<a href="/tabs/tags/" class="nav-link d-flex justify-content-center align-items-center w-100">
										<i class="fa-fw fas fa-tags ml-xl-3 mr-xl-3 unloaded">
										</i>
										<span>
											TAGS
										</span>
									</a>
									<li class="nav-item d-flex justify-content-center ">
										<a href="/tabs/archives/" class="nav-link d-flex justify-content-center align-items-center w-100">
											<i class="fa-fw fas fa-archive ml-xl-3 mr-xl-3 unloaded">
											</i>
											<span>
												ARCHIVES
											</span>
										</a>
										<li class="nav-item d-flex justify-content-center ">
											<a href="/tabs/about/" class="nav-link d-flex justify-content-center align-items-center w-100">
												<i class="fa-fw fas fa-info ml-xl-3 mr-xl-3 unloaded">
												</i>
												<span>
													ABOUT
												</span>
											</a>
					</ul>
				</div>
				<div class="sidebar-bottom d-flex flex-wrap justify-content-around mt-4">
					<span id="mode-toggle-wrapper">
						<i class="mode-toggle fas fa-sun" dark-mode-invisible>
						</i>
						<i class="mode-toggle fas fa-moon" light-mode-invisible>
						</i>
						<script type="text/javascript">
							class ModeToggle {
								static get MODE_KEY() {
									return "mode";
								}
								static get DARK_MODE() {
									return "dark";
								}
								static get LIGHT_MODE() {
									return "light";
								}
								constructor() {
									if (this.mode != null) {
										if (this.mode == ModeToggle.DARK_MODE) {
											if (!this.isSysDarkPrefer) {
												this.setDark();
											}
										} else {
											if (this.isSysDarkPrefer) {
												this.setLight();
											}
										}
									}
									var self = this;
									/* always follow the system prefers */
									this.sysDarkPrefers.addListener(function() {
										if (self.mode != null) {
											if (self.mode == ModeToggle.DARK_MODE) {
												if (!self.isSysDarkPrefer) {
													self.setDark();
												}
											} else {
												if (self.isSysDarkPrefer) {
													self.setLight();
												}
											}
											self.clearMode();
										}
									});
								}
								/* constructor() */
								setDark() {
									$('html').attr(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
									sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
								}
								setLight() {
									$('html').attr(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
									sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
								}
								clearMode() {
									$('html').removeAttr(ModeToggle.MODE_KEY);
									sessionStorage.removeItem(ModeToggle.MODE_KEY);
								}
								get sysDarkPrefers() {
									return window.matchMedia("(prefers-color-scheme: dark)");
								}
								get isSysDarkPrefer() {
									return this.sysDarkPrefers.matches;
								}
								get isDarkMode() {
									return this.mode == ModeToggle.DARK_MODE;
								}
								get isLightMode() {
									return this.mode == ModeToggle.LIGHT_MODE;
								}
								get hasMode() {
									return this.mode != null;
								}
								get mode() {
									return sessionStorage.getItem(ModeToggle.MODE_KEY);
								}
								flipMode() {
									if (this.hasMode) {
										if (this.isSysDarkPrefer) {
											if (this.isLightMode) {
												this.clearMode();
											} else {
												this.setLight();
											}
										} else {
											if (this.isDarkMode) {
												this.clearMode();
											} else {
												this.setDark();
											}
										}
									} else {
										if (this.isSysDarkPrefer) {
											this.setLight();
										} else {
											this.setDark();
										}
									}
								}
								/* flipMode() */
							}
							/* ModeToggle */
							let toggle = new ModeToggle();
							$(".mode-toggle").click(function() {
								toggle.flipMode();
							});
						</script>
					</span>
					<span class="icon-border">
					</span>
					<a href="https://github.com/jianxiaochong" aria-label="github" target="_blank"
					rel="noopener">
						<i class="fab fa-github-alt">
						</i>
					</a>
					<a href="https://twitter.com/jianxiaochong" aria-label="twitter" target="_blank"
					rel="noopener">
						<i class="fab fa-twitter">
						</i>
					</a>
					<a href=" javascript:location.href = 'mailto:' + ['814105368','qq.com'].join('@')"
					aria-label="email">
						<i class="fas fa-envelope">
						</i>
					</a>
					<a href="/feed.xml" aria-label="rss">
						<i class="fas fa-rss">
						</i>
					</a>
				</div>
			</div>
			<div id="topbar-wrapper" class="row justify-content-center topbar-down">
				<div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
					<span id="breadcrumb">
						<span>
							<a href="/">
								Posts
							</a>
						</span>
						<span>
							Markdown文本和排版
						</span>
					</span>
					<i id="sidebar-trigger" class="fas fa-bars fa-fw">
					</i>
					<div id="topbar-title">
						Post
					</div>
					<i id="search-trigger" class="fas fa-search fa-fw">
					</i>
					<span id="search-wrapper" class="align-items-center">
						<i class="fas fa-search fa-fw">
						</i>
						<input class="form-control" id="search-input" type="search" aria-label="search"
						placeholder="Search...">
						<i class="fa fa-times-circle fa-fw" id="search-cleaner">
						</i>
					</span>
					<span id="search-cancel">
						Cancel
					</span>
				</div>
			</div>
			<div id="main-wrapper">
				<div id="main">
					<div class="row">
						<div id="post-wrapper" class="col-12 col-lg-11 col-xl-8">
							<div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
								<h1 data-toc-skip>
									Markdown文本和排版
								</h1>
								<div class="post-meta text-muted d-flex flex-column">
									<div>
										Posted
										<span class="timeago " data-toggle="tooltip" data-placement="bottom" title="Sat, Aug 8, 2020, 11:33 AM +0800">
											Aug 8
											<i class="unloaded">
												2020-08-08T11:33:00+08:00
											</i>
										</span>
										by
										<span class="author">
											jianxiaochong
										</span>
									</div>
								</div>
								<div class="post-content">
									<img src=" "
									data-src="/assets/img/sample/devices-mockup.png" class="post-preview-img">
									<p>
										这个Jekyll模板完全兼容Markdown语法。现在，让我们看看文本和排版。
									</p>
									<h2 id="标题">
										标题
									</h2>
									<hr />
									<h1 id="h1">
										H1
									</h1>
									<h2 data-toc-skip="">
										H2
									</h2>
									<h3 data-toc-skip="">
										H3
									</h3>
									<h4>
										H4
									</h4>
									<hr />
									<h2 id="段落">
										段落
									</h2>
									<p>
										我似浮云独自游
									</p>
									<p>
										悠然溪谷群山中，
									</p>
									<p>
										霎时美景入bai眼帘，
									</p>
									<p>
										金色水仙朵朵开，
									</p>
									<p>
										遍布湖畔树bai荫下，
									</p>
									<p>
										摇曳风中舞翩翩，
									</p>
									<p>
										璀璨漫漫如繁星。
									</p>
									<h2 id="列表">
										列表
									</h2>
									<p>
										###有序列表
									</p>
									<p>
										1.第一项
									</p>
									<p>
										2.第二项
									</p>
									<p>
										3.第三项
									</p>
									<h3 id="无序列表">
										无序列表
									</h3>
									<ul>
										<li>
											item 1
											<ul>
												<li>
													sub item 1
													<li>
														sub item 2
											</ul>
											<li>
												item 2
									</ul>
									<h2 id="整块引用">
										整块引用
									</h2>
									<blockquote>
										<p>
											此行显示块引号。
										</p>
									</blockquote>
									<h2 id="表格">
										表格
									</h2>
									<div class="table-wrapper">
										<table>
											<thead>
												<tr>
													<th style="text-align: left">
														公司
														<th style="text-align: left">
															联系人
															<th style="text-align: right">
																国家
																<tbody>
																	<tr>
																		<td style="text-align: left">
																			Nike
																			<td style="text-align: left">
																				耐克
																				<td style="text-align: right">
																					美国
																					<tr>
																						<td style="text-align: left">
																							Adidas
																							<td style="text-align: left">
																								阿迪达斯
																								<td style="text-align: right">
																									德国
																									<tr>
																										<td style="text-align: left">
																											Huiwei
																											<td style="text-align: left">
																												华为
																												<td style="text-align: right">
																													中国
										</table>
									</div>
									<h2 id="链接">
										链接
									</h2>
									<p>
										<a href="http://127.0.0.1：4000">
											http://127.0.0.1：4000
										</a>
									</p>
									<h2 id="脚注">
										脚注
									</h2>
									<p>
										Click the hook will locate the footnote[^footnote].
									</p>
									<h2 id="图像">
										图像
									</h2>
									<p>
										<img src=" "
										data-src="/assets/img/sample/mockup.png" alt="Desktop View" />
									</p>
									<h2 id="内联代码">
										内联代码
									</h2>
									<p>
										这是一个例子
										<code class="language-plaintext highlighter-rouge">
											Inline Code
										</code>
									</p>
									<h2 id="数学">
										数学
									</h2>
									<p>
										The mathematics powered by
										<a href="https://www.mathjax.org/">
											<strong>
												MathJax
											</strong>
										</a>
										:
									</p>
									\[\sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}\]
									<p>
										When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and
										they are
									</p>
									\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]
									<h2 id="代码段">
										代码段
									</h2>
									<h3 id="普通">
										普通
									</h3>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3
																</pre>
																<td class="rouge-code">
																	<pre>
																		这是一个常见的代码片段，没有语法突出显示和行号。
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h3 id="特定语言">
										特定语言
									</h3>
									<h4 id="console">
										console
									</h4>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2
																</pre>
																<td class="rouge-code">
																	<pre>
																		$ date Sun Nov 3 15:11:12 CST 2019
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<p>
										####
									</p>
									<div class="language-terminal highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3
																</pre>
																<td class="rouge-code">
																	<pre>
																		<span class="gp">
																			$
																		</span>
																		<span class="w">
																		</span>
																		<span class="nb">
																			env
																		</span>
																		|grep SHELL
																		<span class="go">
																			SHELL=/usr/local/bin/bash PYENV_SHELL=bash
																		</span>
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h4 id="ruby">
										Ruby
									</h4>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3 4
																</pre>
																<td class="rouge-code">
																	<pre>
																		def sum_eq_n?(arr, n) return true if arr.empty? &amp;&amp; n == 0 arr.product(arr).reject
																		{ |a,b| a == b }.any? { |a,b| a + b == n } end
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h4 id="shell">
										Shell
									</h4>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3 4
																</pre>
																<td class="rouge-code">
																	<pre>
																		if [ $? -ne 0 ]; then echo "The command was not successful."; #do the
																		needful / exit fi;
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h4 id="liquid">
										Liquid
									</h4>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3
																</pre>
																<td class="rouge-code">
																	<pre>
																		{% if product.title contains 'Pack' %} This product's title contains the
																		word Pack. {% endif %}
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h4 id="html">
										HTML
									</h4>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3 4 5 6 7 8 9 10 11 12
																</pre>
																<td class="rouge-code">
																	<pre>
																		&lt;div class="sidenav"&gt; &lt;a href="#contact"&gt;Contact&lt;/a&gt;
																		&lt;button class="dropdown-btn"&gt;Dropdown &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
																		&lt;/button&gt; &lt;div class="dropdown-container"&gt; &lt;a href="#"&gt;Link
																		1&lt;/a&gt; &lt;a href="#"&gt;Link 2&lt;/a&gt; &lt;a href="#"&gt;Link 3&lt;/a&gt;
																		&lt;/div&gt; &lt;a href="#contact"&gt;Search&lt;/a&gt; &lt;/div&gt;
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<p>
										<strong>
											Horizontal Scrolling
										</strong>
									</p>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3 4 5 6 7 8 9
																</pre>
																<td class="rouge-code">
																	<pre>
																		&lt;div class="panel-group"&gt; &lt;div class="panel panel-default"&gt;
																		&lt;div class="panel-heading" id=""&gt; &lt;i class="far fa-folder"&gt;&lt;/i&gt;
																		&lt;p&gt;This is a very long long long long long long long long long long
																		long long long long long long long long long long long line.&lt;/p&gt;
																		&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h2 id="反脚注">
										反脚注
									</h2>
									<p>
										[^footnote]：脚注源。
									</p>
								</div>
								<div class="post-tail-wrapper text-muted">
									<div class="post-meta mb-3">
										<i class="far fa-folder-open fa-fw mr-1">
										</i>
										<a href='/categories/blogging/'>
											Blogging
										</a>
										,
										<a href='/categories/demo/'>
											Demo
										</a>
									</div>
									<div class="post-tags">
										<i class="fa fa-tags fa-fw mr-1">
										</i>
										<a href="/tags/typography/" class="post-tag no-text-decoration">
											typography
										</a>
									</div>
									<div class="post-tail-bottom d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
										<div class="license-wrapper">
											This post is licensed under
											<a href="https://creativecommons.org/licenses/by/4.0/">
												CC BY 4.0
											</a>
											by the author.
										</div>
										<div class="share-wrapper">
											<span class="share-label text-muted mr-1">
												Share
											</span>
											<span class="share-icons">
												<a href="https://twitter.com/intent/tweet?text=Markdown文本和排版 - jianxiaochong&url=https://jianxiaochong.github.io/posts/text-and-typography/"
												data-toggle="tooltip" data-placement="top" title="Twitter" target="_blank"
												rel="noopener" aria-label="Twitter">
													<i class="fa-fw fab fa-twitter">
													</i>
												</a>
												<a href="https://www.facebook.com/sharer/sharer.php?title=Markdown文本和排版 - jianxiaochong&u=https://jianxiaochong.github.io/posts/text-and-typography/"
												data-toggle="tooltip" data-placement="top" title="Facebook" target="_blank"
												rel="noopener" aria-label="Facebook">
													<i class="fa-fw fab fa-facebook-square">
													</i>
												</a>
												<a href="https://telegram.me/share?text=Markdown文本和排版 - jianxiaochong&url=https://jianxiaochong.github.io/posts/text-and-typography/"
												data-toggle="tooltip" data-placement="top" title="Telegram" target="_blank"
												rel="noopener" aria-label="Telegram">
													<i class="fa-fw fab fa-telegram">
													</i>
												</a>
												<i class="fa-fw fas fa-link small" onclick="copyLink()" data-toggle="tooltip"
												data-placement="top" title="Copy link">
												</i>
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
							<div class="access">
								<div id="access-tags">
									<span>
										Trending Tags
									</span>
									<div class="d-flex flex-wrap mt-3 mb-1 mr-3">
										<a class="post-tag" href="/tags/favicon/">
											favicon
										</a>
										<a class="post-tag" href="/tags/getting-started/">
											getting started
										</a>
										<a class="post-tag" href="/tags/typography/">
											typography
										</a>
										<a class="post-tag" href="/tags/writing/">
											writing
										</a>
									</div>
								</div>
							</div>
							<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
								<span class="pl-3 pt-2 mb-2">
									Contents
								</span>
								<nav id="toc" data-toggle="toc">
								</nav>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-12 col-lg-11 col-xl-8">
							<div id="post-extend-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
								<div id="related-posts" class="mt-5 mb-2 mb-sm-4">
									<h3 class="pt-2 mt-1 mb-4 ml-1" data-toc-skip>
										Further Reading
									</h3>
									<div class="card-deck mb-4">
										<div class="card">
											<a href="/posts/getting-started/">
												<div class="card-body">
													<span class="timeago small">
														Aug 9, 2019
														<i class="unloaded">
															2019-08-09T20:55:00+08:00
														</i>
													</span>
													<h3 class="pt-0 mt-1 mb-3" data-toc-skip>
														Getting Started
													</h3>
													<div class="text-muted small">
														<p>
															Installation Fork Chirpy on GitHub, rename the repository to USERNAME.github.io
															(where USERNAME is your GitHub username), and then open terminal and clone
															the fork to local by: $ git clone https:...
														</p>
													</div>
												</div>
											</a>
										</div>
										<div class="card">
											<a href="/posts/customize-the-favicon/">
												<div class="card-body">
													<span class="timeago small">
														Aug 11, 2019
														<i class="unloaded">
															2019-08-11T00:34:00+08:00
														</i>
													</span>
													<h3 class="pt-0 mt-1 mb-3" data-toc-skip>
														Customize the Favicon
													</h3>
													<div class="text-muted small">
														<p>
															In Chirpy, the image files of Favicons are placed in assets/img/favicons/.
															You may need to replace them with your own. So let’s see how to customize
															these Favicons. With a square image (PNG, JPG o...
														</p>
													</div>
												</div>
											</a>
										</div>
										<div class="card">
											<a href="/posts/write-a-new-post/">
												<div class="card-body">
													<span class="timeago small">
														Aug 8
														<i class="unloaded">
															2020-08-08T14:10:00+08:00
														</i>
													</span>
													<h3 class="pt-0 mt-1 mb-3" data-toc-skip>
														撰写新文章
													</h3>
													<div class="text-muted small">
														<p>
															命名和路径 创建一个名为YYYY-MM-DD的新文件-标题.扩展名并将其放在根目录的“_post/”中。请注意，“EXTENSION”必须是“md”和“markdown”之一。从“v2.4.1”开始，您可以在“_post/”下创建子目录来对文章进行分类。
															前题 基本上，你需要填充，如下图所示：正面内容 1 2 3 4 5 6 --- title: TITLE #标题 date: YY...
														</p>
													</div>
												</div>
											</a>
										</div>
									</div>
								</div>
								<div class="post-navigation d-flex justify-content-between">
									<a href="/posts/customize-the-favicon/" class="btn btn-outline-primary">
										<p>
											Customize the Favicon
										</p>
									</a>
									<a href="/posts/write-a-new-post/" class="btn btn-outline-primary">
										<p>
											撰写新文章
										</p>
									</a>
								</div>
							</div>
						</div>
					</div>
					<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js">
					</script>
					<script type="text/javascript">
						const imgs = document.querySelectorAll('#post-wrapper img');
						const observer = lozad(imgs);
						observer.observe();
					</script>
					<footer class="d-flex w-100 justify-content-center">
						<div class="d-flex justify-content-between align-items-center">
							<div class="footer-left">
								<p class="mb-0">
									© 2020
									<a href="https://twitter.com/jianxiaochong">
										jianxiaochong
									</a>
									.
									<span data-toggle="tooltip" data-placement="top" title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.">
										Some rights reserved.
									</span>
								</p>
							</div>
							<div class="footer-right">
								<p class="mb-0">
									Powered by
									<a href="https://jekyllrb.com" target="_blank" rel="noopener">
										Jekyll
									</a>
									with
									<a href="https://github.com/cotes2020/jekyll-theme-chirpy/" target="_blank"
									rel="noopener">
										Chirpy
									</a>
									theme.
								</p>
							</div>
						</div>
					</footer>
				</div>
				<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
					<div class="col-12 col-xl-11 post-content">
						<div id="search-hints">
							<h4 class="text-muted mb-4">
								Trending Tags
							</h4>
							<a class="post-tag" href="/tags/favicon/">
								favicon
							</a>
							<a class="post-tag" href="/tags/getting-started/">
								getting started
							</a>
							<a class="post-tag" href="/tags/typography/">
								typography
							</a>
							<a class="post-tag" href="/tags/writing/">
								writing
							</a>
						</div>
						<div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3">
						</div>
					</div>
				</div>
			</div>
			<div id="mask">
			</div>
			<a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow"
			role="button">
				<i class="fas fa-angle-up">
				</i>
			</a>
			<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.7.3/dest/simple-jekyll-search.min.js">
			</script>
			<script>
				SimpleJekyllSearch({
					searchInput: document.getElementById('search-input'),
					resultsContainer: document.getElementById('search-results'),
					json: '/assets/js/data/search.json',
					searchResultTemplate: '<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0"> <a href="https://jianxiaochong.github.io{url}">{title}</a><div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1"><div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>{categories}</div><div><i class="fa fa-tag fa-fw"></i>{tags}</div></div><p>{snippet}</p></div>',
					noResultsText: '<p class="mt-5">Oops! No result founds.</p>'
				});
			</script>
			<script async src="https://www.googletagmanager.com/gtag/js?id=">
			</script>
			<script>
				window.dataLayer = window.dataLayer || [];
				function gtag() {
					dataLayer.push(arguments);
				}
				gtag('js', new Date());
				gtag('config', '');
			</script>